<!--
  组件最外层容器
  用于配置公共代码逻辑和公共样式
  目标组件如果需要作为tooltip片段整个插入到别的组件高级tooltip中取，必须嵌套这个组件
-->
<template>
  <div
    :id="`widgetBox_${wid}`"
    :class="`widget-container widget-container_${xvueTheme}`"
    :style="wigetBoxStyle"
  >
    <slot></slot>
  </div>
</template>
<script>
import { mapState } from 'vuex';

export default {
  components: {},
  props: {},
  data() {
    return {
      xvueTheme: window._adoPremise.uc.theme,
    };
  },
  computed: {
    ...mapState({
      asTooltips: state => state.VisualComponentsModule.asTooltips,
      asTooltipUsers: state => state.VisualComponentsModule.asTooltipUsers,
    }),
    wid() {
      return this.$parent.widgetInstanceId;
    },
    wigetBoxStyle() {
      const p = this.$parent;
      const wid = p.widgetInstanceId;
      const style = {};

      const tipWidget = this.asTooltips.find(n => n.wid === wid);
      if (tipWidget) {
        const { asTooltipKey } = tipWidget;
        const users = this.asTooltipUsers;
        const user = users.find(n => n.isHovering && n.asTooltipKey === asTooltipKey);
        if (user) {
          if (p.w) {
            style.width = `${p.w}px`;
          }
          if (p.h) {
            style.height = `${p.h}px`;
          }
        }

        if (p.isDesignView || window.isLocalEnv) {
          style.opacity = 1;
        } else if (user) {
          style.opacity = 1;
        } else {
          style.opacity = 0.01;
        }
      }

      return style;
    },
  },
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.widget-container {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  position: relative;
}
</style>
<style lang="less">
@import '../../../common/variables.less';
.asTooltip .widget-container {
  display: inline-block;
}
.visualComponents_theme_dark {
  .el-select-dropdown {
    background-color: @droplist_bg_color_dark;
    border-color: @droplist_border_color_dark;
    .el-select-dropdown__item {
      color: @text_color_dark;
      &.is-disabled {
        color: @disabled_text_color_dark;
        &:hover {
          background-color: @droplist_disabled_bg_hover_color_dark;
        }
      }
      &.hover {
        background-color: @droplist_bg_hover_color_dark;
      }
    }
  }
}
</style>
